<template>
  <div>
    <ul class="vs_xuanhao">
      <li
        class="zhenghe_li_qiu"
        v-for="(item,index) in list"
        :key="index"
        :class="{active:matchClass(index)}"
        @click="changeMatch(index)"
      >
        <b>{{item.longhudou}}</b>
        <!-- <p>{{item.longhudou2}}</p> -->
        <p v-if="item.longhudou=='龙'">{{bonus_odd.dragon}}</p>
        <p v-if="item.longhudou=='虎'">{{bonus_odd.tiger}}</p>
        <p v-if="item.longhudou=='和'">{{bonus_odd.flat}}</p>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState } from 'vuex';
const arr = ['龙', '和', '虎']
export default {
  name: "wanfa",
  computed: {
    ...mapState(['bonus_odd'])
  },
  props: {
    name: {
      type: String,
    }
  },
  data() {
    return {
      list: [
        {
          id: "0",
          longhudou: "龙",
          longhudou2: "2"
        },
        {
          id: "1",
          longhudou: "和",
          longhudou2: "9"
        },
        {
          id: "2",
          longhudou: "虎",
          longhudou2: "2"
        }
      ],
      activeIndex: [], //这是龙虎斗的数组
      result: []
    };
  },
  methods: {
    clear(){
      this.activeIndex = []
    },
    //   点击0-9图片匹配 includes选中的数据 有该项下标时 返回true 没有返回false
    matchClass(index) {
      return this.activeIndex.includes(index);
    },
    //  单独点击下面动物改变
    changeMatch(index) {
      // 声明一个这个数组中有没有这个下标
      let bol = this.activeIndex.includes(index);
      if (bol) {
        // 若是选中这个，则删除一个这个index
        this.activeIndex.splice(this.activeIndex.indexOf(index), 1);
      } else {
        // 若是没有，则添加这个下标
        this.activeIndex.push(index);
      }
      let temp = [];
      this.activeIndex.forEach(item => {
        temp.push({type: this.name, value: arr[item]})
      })
      this.$emit("getActiveData", temp);
    }
  }
};
</script>

<style>
.longhu_li .vs_xuanhao .zhenghe_li_qiu {
  text-align: center;
  width: 33.33%;
  padding: 0.2rem 0 0.22rem;
}

.longhu_li .vs_xuanhao .zhenghe_li_qiu b {
  border-radius: 50%;
  width: 0.7rem;
  height: 0.7rem;
  display: inline-block;
  text-align: center;
  line-height: 0.7rem;
  font-size: 0.3rem;
  color: #ffffff;
  margin-bottom: 0.09rem;
}

.longhu_li .vs_xuanhao .zhenghe_li_qiu:nth-child(1) b {
  background-color: #e34259;
}

.longhu_li .vs_xuanhao .zhenghe_li_qiu:nth-child(2) b {
  background-color: #77b666;
}

.longhu_li .vs_xuanhao .zhenghe_li_qiu:nth-child(3) b {
  background-color: #3654d4;
}

.longhu_li .vs_xuanhao .zhenghe_li_qiu:nth-child(2) {
  border-right: 1px solid #f2f2f2;
  border-left: 1px solid #f2f2f2;
}
.vs_xuanhao .zhenghe_li_qiu.active {
  background-color: #d31d17;
}
</style>
